<template>
  <div class="electronic-archive-container">
    <!-- 页面头部 -->
    <div class="electronic-archive-header">
      <div class="header-content">
        <div class="ancient-title">电子档案管理</div>
        <div class="header-subtitle">数字时代 · 安全高效档案管理</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">💾</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由导航 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/files">
            <FolderOutlined />
            档案文件管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <LaptopOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <FileOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">电子档案</div>
              <div class="stat-value">{{ electronicStats.totalFiles }}</div>
              <div class="stat-label">万份文件</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card security-stat">
            <div class="stat-icon">
              <SafetyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">安全等级</div>
              <div class="stat-value">{{ electronicStats.securityLevel }}</div>
              <div class="stat-label">AAA+级</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card version-stat">
            <div class="stat-icon">
              <BranchesOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">版本控制</div>
              <div class="stat-value">{{ electronicStats.versionCount }}</div>
              <div class="stat-label">个版本</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card backup-stat">
            <div class="stat-icon">
              <CloudUploadOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">备份覆盖率</div>
              <div class="stat-value">{{ electronicStats.backupCoverage }}%</div>
              <div class="stat-label">完整备份</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块导航 -->
    <div class="modules-section">
      <h3 class="section-title">
        <LaptopOutlined class="section-icon" />
        电子档案功能
      </h3>

      <a-row :gutter="[24, 24]" class="modules-grid">
        <!-- 文件版本控制 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/electronic-archive/version-control')">
            <div class="module-header">
              <div class="module-icon">
                <BranchesOutlined />
              </div>
              <div class="module-title">文件版本控制</div>
            </div>
            <div class="module-description">管理文件版本历史，支持版本比较、回滚和分支管理，确保档案变更可追溯</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">活跃版本：</span>
                <span class="stat-value">{{ moduleStats.versionControl.activeVersions }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">今日提交：</span>
                <span class="stat-value">{{ moduleStats.versionControl.todayCommits }}次</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 访问权限设置 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/electronic-archive/access-permission')">
            <div class="module-header">
              <div class="module-icon">
                <LockOutlined />
              </div>
              <div class="module-title">访问权限设置</div>
            </div>
            <div class="module-description">精细化权限控制，支持角色分配、权限继承和动态授权，保障档案安全</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">权限组：</span>
                <span class="stat-value">{{ moduleStats.accessPermission.permissionGroups }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">授权用户：</span>
                <span class="stat-value">{{ moduleStats.accessPermission.authorizedUsers }}人</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 备份恢复系统 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/electronic-archive/backup-recovery')">
            <div class="module-header">
              <div class="module-icon">
                <CloudUploadOutlined />
              </div>
              <div class="module-title">备份恢复系统</div>
            </div>
            <div class="module-description">自动化备份策略，多地异地备份，快速恢复机制，确保数据永不丢失</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">备份任务：</span>
                <span class="stat-value">{{ moduleStats.backupRecovery.backupTasks }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">恢复成功率：</span>
                <span class="stat-value">{{ moduleStats.backupRecovery.recoveryRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 安全加密保护 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/files/electronic-archive/security-encryption')">
            <div class="module-header">
              <div class="module-icon">
                <SafetyOutlined />
              </div>
              <div class="module-title">安全加密保护</div>
            </div>
            <div class="module-description">多层次加密策略，量子加密算法，数字签名验证，全方位保护档案安全</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">加密文件：</span>
                <span class="stat-value">{{ moduleStats.securityEncryption.encryptedFiles }}万份</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">安全事件：</span>
                <span class="stat-value">{{ moduleStats.securityEncryption.securityEvents }}起</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 系统监控面板 -->
    <div class="monitoring-section">
      <h3 class="section-title">
        <DashboardOutlined class="section-icon" />
        系统监控
      </h3>

      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :lg="8">
          <div class="monitor-card">
            <div class="monitor-title">存储使用情况</div>
            <div class="storage-info">
              <div class="storage-item">
                <span class="storage-label">总容量：</span>
                <span class="storage-value">500TB</span>
              </div>
              <div class="storage-item">
                <span class="storage-label">已使用：</span>
                <span class="storage-value">{{ systemMonitor.storageUsed }}TB</span>
              </div>
              <div class="storage-item">
                <span class="storage-label">可用：</span>
                <span class="storage-value">{{ 500 - systemMonitor.storageUsed }}TB</span>
              </div>
            </div>
            <a-progress :percent="Math.round((systemMonitor.storageUsed / 500) * 100)" :stroke-color="getStorageColor(systemMonitor.storageUsed / 500)" />
          </div>
        </a-col>

        <a-col :xs="24" :lg="8">
          <div class="monitor-card">
            <div class="monitor-title">系统性能</div>
            <div class="performance-metrics">
              <div class="metric-item">
                <span class="metric-label">CPU使用率：</span>
                <span class="metric-value">{{ systemMonitor.cpuUsage }}%</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">内存使用率：</span>
                <span class="metric-value">{{ systemMonitor.memoryUsage }}%</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">网络吞吐：</span>
                <span class="metric-value">{{ systemMonitor.networkThroughput }}MB/s</span>
              </div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :lg="8">
          <div class="monitor-card">
            <div class="monitor-title">安全状态</div>
            <div class="security-status">
              <div class="status-item">
                <a-badge status="success" text="防火墙正常" />
              </div>
              <div class="status-item">
                <a-badge status="success" text="入侵检测正常" />
              </div>
              <div class="status-item">
                <a-badge status="warning" text="发现1个可疑访问" />
              </div>
              <div class="status-item">
                <a-badge status="success" text="数据加密正常" />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 最新操作日志 -->
    <div class="operations-log-section">
      <h3 class="section-title">
        <HistoryOutlined class="section-icon" />
        最新操作日志
      </h3>

      <div class="operations-list">
        <a-list :data-source="operationLogs" :pagination="{ pageSize: 8, showSizeChanger: false }">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar :style="{ backgroundColor: item.avatarColor }" size="large">
                    <component :is="item.icon" />
                  </a-avatar>
                </template>
                <template #title>
                  <span class="operation-title">{{ item.title }}</span>
                  <a-tag :color="item.tagColor" size="small" style="margin-left: 8px">{{ item.type }}</a-tag>
                </template>
                <template #description>
                  <div class="operation-description">{{ item.description }}</div>
                  <div class="operation-meta">
                    <span class="operation-time">{{ item.time }}</span>
                    <span class="operation-user">操作人：{{ item.user }}</span>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  HomeOutlined,
  FolderOutlined,
  LaptopOutlined,
  FileOutlined,
  SafetyOutlined,
  BranchesOutlined,
  CloudUploadOutlined,
  LockOutlined,
  DashboardOutlined,
  HistoryOutlined,
  SearchOutlined,
  SwapOutlined,
  AuditOutlined,
  SettingOutlined,
  UndoOutlined,
  KeyOutlined,
  BarChartOutlined,
  CheckCircleOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 电子档案统计
const electronicStats = reactive({
  totalFiles: 95.8,
  securityLevel: 'AAA+',
  versionCount: 12456,
  backupCoverage: 99.8
})

// 模块统计
const moduleStats = reactive({
  versionControl: {
    activeVersions: 1256,
    todayCommits: 89
  },
  accessPermission: {
    permissionGroups: 45,
    authorizedUsers: 8888
  },
  backupRecovery: {
    backupTasks: 156,
    recoveryRate: 99.9
  },
  securityEncryption: {
    encryptedFiles: 95.8,
    securityEvents: 0
  }
})

// 系统监控
const systemMonitor = reactive({
  storageUsed: 356.8,
  cpuUsage: 15.6,
  memoryUsage: 68.2,
  networkThroughput: 45.6
})

// 操作日志
const operationLogs = ref([
  {
    id: 1,
    title: '批量文件加密完成',
    description: '对3.2万份重要档案执行AES-256加密，所有文件加密成功',
    type: '安全操作',
    time: '30分钟前',
    user: '安全管理员王守仁',
    icon: 'SafetyOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  },
  {
    id: 2,
    title: '版本合并操作',
    description: '合并生死簿管理系统v2.3.1和v2.3.2版本，解决了14个冲突',
    type: '版本控制',
    time: '1小时前',
    user: '开发工程师李时珍',
    icon: 'BranchesOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 3,
    title: '权限策略更新',
    description: '更新档案访问权限策略，新增临时访问权限功能',
    type: '权限管理',
    time: '2小时前',
    user: '权限管理员苏东坡',
    icon: 'LockOutlined',
    avatarColor: '#fa8c16',
    tagColor: 'orange'
  },
  {
    id: 4,
    title: '自动备份完成',
    description: '定时备份任务执行完成，备份文件95.8万份，耗时2小时15分钟',
    type: '备份操作',
    time: '4小时前',
    user: '系统自动',
    icon: 'CloudUploadOutlined',
    avatarColor: '#722ed1',
    tagColor: 'purple'
  },
  {
    id: 5,
    title: '安全漏洞扫描',
    description: '完成系统安全漏洞扫描，发现3个低危漏洞，已修复2个',
    type: '安全检查',
    time: '6小时前',
    user: '安全审计员杜甫',
    icon: 'SearchOutlined',
    avatarColor: '#f5222d',
    tagColor: 'red'
  },
  {
    id: 6,
    title: '档案数据迁移',
    description: '将旧系统中的12万份档案成功迁移到新的存储系统',
    type: '数据迁移',
    time: '12小时前',
    user: '数据管理员白居易',
    icon: 'SwapOutlined',
    avatarColor: '#13c2c2',
    tagColor: 'cyan'
  },
  {
    id: 7,
    title: '权限审核完成',
    description: '完成第三季度权限审核，撤销23个过期权限，新增67个权限',
    type: '权限审核',
    time: '1天前',
    user: '权限审核员陆游',
    icon: 'AuditOutlined',
    avatarColor: '#faad14',
    tagColor: 'gold'
  },
  {
    id: 8,
    title: '备份策略优化',
    description: '优化备份策略，实现增量备份，备份时间缩短60%',
    type: '策略优化',
    time: '2天前',
    user: '系统架构师辛弃疾',
    icon: 'SettingOutlined',
    avatarColor: '#722ed1',
    tagColor: 'purple'
  },
  {
    id: 9,
    title: '版本回滚操作',
    description: '因发现严重bug，将业力计算模块回滚至v1.8.3版本',
    type: '版本回滚',
    time: '3天前',
    user: '技术主管岳飞',
    icon: 'UndoOutlined',
    avatarColor: '#fa8c16',
    tagColor: 'orange'
  },
  {
    id: 10,
    title: '加密算法升级',
    description: '核心档案加密算法升级至量子加密，安全级别提升至SSS+',
    type: '加密升级',
    time: '5天前',
    user: '密码学专家韩愈',
    icon: 'KeyOutlined',
    avatarColor: '#eb2f96',
    tagColor: 'magenta'
  },
  {
    id: 11,
    title: '访问日志分析',
    description: '分析本月访问日志，发现异常访问模式5个，已加强监控',
    type: '日志分析',
    time: '1周前',
    user: '日志分析员柳宗元',
    icon: 'BarChartOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 12,
    title: '数据完整性检查',
    description: '完成所有电子档案数据完整性检查，检查通过率99.97%',
    type: '完整性检查',
    time: '1周前',
    user: '数据质量员曾巩',
    icon: 'CheckCircleOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  }
])

// 新增：版本控制详细统计
const versionControlStats = reactive({
  totalVersions: 12456,
  activeVersions: 1256,
  todayCommits: 89,
  weeklyCommits: 567,
  monthlyCommits: 2345,
  totalCommits: 98765,
  branchCount: 234,
  mergeRequests: 45,
  conflictResolution: 12,
  rollbackCount: 8,
  topFiles: [
    { file: '生死簿核心模块', versions: 89, lastUpdate: '2小时前' },
    { file: '业力计算引擎', versions: 67, lastUpdate: '4小时前' },
    { file: '审判流程系统', versions: 56, lastUpdate: '1天前' },
    { file: '轮回分配算法', versions: 45, lastUpdate: '2天前' },
    { file: '权限管理系统', versions: 34, lastUpdate: '3天前' },
    { file: '数据备份模块', versions: 23, lastUpdate: '5天前' },
    { file: '监控预警系统', versions: 18, lastUpdate: '1周前' },
    { file: '报表生成器', versions: 12, lastUpdate: '2周前' }
  ]
})

// 新增：权限管理详细统计
const permissionStats = reactive({
  totalUsers: 8888,
  activeUsers: 5432,
  permissionGroups: 45,
  totalPermissions: 567,
  todayLogins: 1234,
  weeklyLogins: 7890,
  monthlyLogins: 34567,
  userTypes: [
    { type: '系统管理员', count: 12, percentage: 0.1 },
    { type: '阎王', count: 10, percentage: 0.1 },
    { type: '判官', count: 120, percentage: 1.4 },
    { type: '书记官', count: 456, percentage: 5.1 },
    { type: '鬼差', count: 2340, percentage: 26.3 },
    { type: '档案管理员', count: 234, percentage: 2.6 },
    { type: '普通仙官', count: 5716, percentage: 64.4 }
  ],
  recentActivities: [
    { user: '阎罗王', action: '查看生死簿', time: '刚刚' },
    { user: '判官王某', action: '修改业力记录', time: '5分钟前' },
    { user: '书记官李某', action: '新增档案', time: '10分钟前' },
    { user: '鬼差张某', action: '更新轮回状态', time: '15分钟前' },
    { user: '档案员刘某', action: '档案分类', time: '30分钟前' }
  ]
})

// 新增：备份恢复详细统计
const backupStats = reactive({
  totalBackups: 2345,
  successfulBackups: 2341,
  failedBackups: 4,
  averageBackupTime: 125.6,
  totalBackupSize: 1256.8,
  backupTypes: [
    { type: '全量备份', count: 156, size: 890.4, frequency: '每周' },
    { type: '增量备份', count: 1890, size: 234.5, frequency: '每日' },
    { type: '差异备份', count: 299, size: 131.9, frequency: '每小时' }
  ],
  recoveryTests: [
    { date: '2023-12-01', type: '全量恢复', duration: 45.6, success: true },
    { date: '2023-11-24', type: '增量恢复', duration: 12.3, success: true },
    { date: '2023-11-17', type: '差异恢复', duration: 8.7, success: true },
    { date: '2023-11-10', type: '文件级恢复', duration: 3.2, success: true },
    { date: '2023-11-03', type: '数据库恢复', duration: 23.8, success: true }
  ],
  storageDistribution: [
    { location: '本地存储', size: 456.7, percentage: 36.3 },
    { location: '云端存储', size: 567.8, percentage: 45.2 },
    { location: '异地备份', size: 232.3, percentage: 18.5 }
  ]
})

// 新增：安全加密详细统计
const securityStats = reactive({
  encryptedFiles: 958567,
  encryptionCoverage: 99.8,
  encryptionAlgorithms: [
    { algorithm: 'AES-256', files: 567890, percentage: 59.2 },
    { algorithm: 'RSA-4096', files: 234567, percentage: 24.5 },
    { algorithm: '量子加密', files: 123456, percentage: 12.9 },
    { algorithm: 'ECC-521', files: 32654, percentage: 3.4 }
  ],
  securityEvents: [
    { event: '异常登录尝试', count: 23, level: '中危', time: '2小时前' },
    { event: '权限提升尝试', count: 5, level: '高危', time: '6小时前' },
    { event: '数据访问异常', count: 12, level: '低危', time: '1天前' },
    { event: '文件完整性检查失败', count: 3, level: '中危', time: '3天前' }
  ],
  auditLogs: [
    { action: '文件加密', user: '系统自动', count: 12456, time: '今日' },
    { action: '权限验证', user: '多用户', count: 34567, time: '今日' },
    { action: '访问控制', user: '多用户', count: 56789, time: '今日' },
    { action: '数据完整性检查', user: '系统自动', count: 789, time: '今日' }
  ]
})

// 新增：系统性能详细监控
const performanceMonitor = reactive({
  systemHealth: {
    overall: 98.5,
    cpu: 15.6,
    memory: 68.2,
    disk: 45.3,
    network: 23.4
  },
  responseTime: {
    average: 145.6,
    median: 120.3,
    p95: 280.7,
    p99: 456.8
  },
  throughput: {
    requests: 12345,
    operations: 56789,
    dataTransfer: 234.5
  },
  errorRates: {
    total: 0.12,
    system: 0.08,
    user: 0.04
  }
})

// 方法
const navigateToModule = (path) => {
  router.push(path)
}

const getStorageColor = (ratio) => {
  if (ratio < 0.7) return '#52c41a'
  if (ratio < 0.9) return '#faad14'
  return '#ff4d4f'
}
</script>

<style lang="scss" scoped>
.electronic-archive-container {
  padding: 24px;

  // 页面头部
  .electronic-archive-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.security-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.version-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.backup-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 模块导航区域
  .modules-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .module-card {
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .module-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, $secondary-color, #f0c674);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: white;
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          color: $primary-color;
        }
      }

      .module-description {
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .module-stats {
        padding-top: 16px;
        border-top: 1px solid rgba(212, 153, 10, 0.2);

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .stat-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .stat-value {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }

  // 监控面板区域
  .monitoring-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .monitor-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      height: 100%;

      .monitor-title {
        font-size: 16px;
        font-weight: bold;
        color: $primary-color;
        margin-bottom: 16px;
      }

      .storage-info,
      .performance-metrics {
        margin-bottom: 16px;

        .storage-item,
        .metric-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .storage-label,
          .metric-label {
            color: $text-secondary;
          }

          .storage-value,
          .metric-value {
            color: $secondary-color;
            font-weight: bold;
          }
        }
      }

      .security-status {
        .status-item {
          margin-bottom: 8px;
        }
      }
    }
  }

  // 操作日志区域
  .operations-log-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .operations-list {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);

      .operation-title {
        font-weight: bold;
        color: $primary-color;
        font-size: 16px;
      }

      .operation-description {
        color: $text-primary;
        line-height: 1.5;
        margin-bottom: 8px;
      }

      .operation-meta {
        display: flex;
        gap: 16px;

        .operation-time {
          color: $text-secondary;
          font-size: 14px;
        }

        .operation-user {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
